<template>
	<div>
		<section class="message">
			<div>
				<ul>
					<li class="gonggao" v-if="show_notice" @click='toMessageDetail("notice")'>
						<div class="context">
							<p class="p1"> <img src=""
								 alt="">公告</p>
							<p class="p2">{{notice}}</p>
							<span class="createtime">{{notice_time}}</span>
						</div>
					</li>
					<li @click='toMessageDetail(item.id,index)' v-for="(item, index) in messageList" :key="index">
						<div class="context">
							<p class="p1">{{item.title}}
								<span class="spot" v-if="item.isread=='0'"></span>
							</p>
							<p class="p2">{{item.desc}}
							</p>
						</div>
						<span class="createtime">{{item.createtime_pst}}</span>
					</li>
				</ul>
				<div class='f_center' v-if='messageList.length !==0'>
					<span @click="changePage()" class="more">查看更多</span>
				</div>
			</div>
		</section>
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
                notice: "",
                notice_time: "",
                show_notice: false
			}
		},
		computed: {
			...mapState(['messageList'])
		},
		methods: {
			...mapMutations(['UPDATEPAGE','UPDATENOTICE']),
			...mapActions(['updateMessage']),
			toMessageDetail(id, index) {
                var d = {}
                if (id == 'notice') {
                    d = {
                        notice: 'notice'
                    }
                } else {
                    d = {
                        id: id,
						index: index
                    }
                }
				this.$router.push({
					path: '/messageDetail',
					query: d
				})
			},
			changePage() {
				this.UPDATEPAGE();
				this.updateMessage();
			},
            getNotice() {
				var d = "appid=" + userInfo.appid + "&userid=" + userInfo.userid;
				var that = this;
				this.axios.post(userInfo.hosturl + '/IOSApi/ajax_notice', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						if (!!data.data.title){
                            data = data.data;
                            that.show_notice = true;
                            that.notice_time = data.createtime_pst;
                            that.notice = data.desc
                            that.UPDATENOTICE({title:data.title,content: data.content,link: data.link})
                        }
					} else {
						toast(data.error);
					}
				})
			}
		},
		mounted() {
			this.updateMessage();
			this.getNotice();
		},
		activated() {}
	}

</script>
<style lang="scss" scoped>
	.message {
		padding: 0.5rem 0.4rem;

		li {
			position: relative;
			border-bottom: 1px solid #e5e5e5;
			text-align: left;
		}

		.createtime {
			position: absolute;
			display: inline-block;
			top: 0.4rem;
			right: 0.1rem;
			font-size: 0.22rem;
			color: #999;
		}

		.context {
			overflow: hidden;
			display: inline-block;
			width: 4.3rem;
			padding: 0.15rem 0rem;

			.p1 {
				font-weight: 500;
			}

			.p2 {
				overflow: hidden;
				margin-top: 0.1rem;
				font-size: .22rem;
				color: #666;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.spot {
				display: inline-block;
				width: 0.1rem;
				height: 0.1rem;
				border-radius: 100%;
				background-color: #FF3B49;
				vertical-align: text-top;
			}
		}

		.gonggao .p1 {
			font-weight: bold;

			img {
				width: 0.35rem;
				margin-top: -0.1rem;
			}
		}
	}

</style>
